<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue';
import {useTable} from "~/composables/table.ts";
import {useForm} from "~/composables/form.ts";

interface ${tableClass.shortClassName}{
    id: string
    <#list tableClass.allFields as field>
    <#if field.fieldName != "id">
    ${field.fieldName}: ${field.shortTypeName?uncap_first}
    </#if>
    </#list>
}
const apiPrefix = "${tableClass.shortClassName?uncap_first}"
const columns = shallowRef([
    <#list tableClass.allFields as field>
    <#if field.fieldName != "id">
    {
        title: '${field.fieldName}',
        dataIndex: '${field.fieldName}',
    },
    </#if>
    </#list>
])

const { state, initQuery, query } = useTable({
    apiPrefix,
    searchColumn:[],
    afterQuery: (res) => {
        console.log(res)
        return res
    },
})

const {formState,handleOk,handleCancel,handleAdd,handleEdit,handleDelete,formRef} = useForm({
    apiPrefix,
    query,
})

</script>

<template>
    <page-container>
        <a-card>
            <template #extra>
                <a-space size="large">
                    <a-button type="primary" @click="handleAdd">
                        <template #icon>
                            <PlusOutlined />
                        </template>
                        新增
                    </a-button>
                    <a-input-search
                            v-model:value="state.searchKeyWorld"
                            placeholder="输入搜索关键词"
                            enter-button
                            @search="initQuery"
                    />
                </a-space>
            </template>
            <a-table
                    row-key="id" :row-selection="state.rowSelections" :loading="state.loading" :columns="columns"
                    :data-source="state.dataSource" :pagination="state.pagination"
            >
                <template #bodyCell="scope">
                    <template v-if="scope?.column?.dataIndex === 'action'">
                        <div flex gap-2>
                            <a-button type="link" @click="handleEdit(scope?.record as ${tableClass.shortClassName})">
                                编辑
                            </a-button>
                            <a-popconfirm
                                    title="确定删除该条数据？" ok-text="确定" cancel-text="取消"
                                    @confirm="handleDelete(scope?.record as ${tableClass.shortClassName})"
                            >
                                <a-button type="link">
                                    删除
                                </a-button>
                            </a-popconfirm>
                        </div>
                    </template>
                </template>
            </a-table>
        </a-card>

        <a-modal v-model:open="formState.formVisible" :title="formState.isUpdate?'编辑':'新增'" @ok="handleOk" @cancel="handleCancel">
            <a-form ref="formRef" :model="formState.formData" class="w-full" :label-col="{ style: { width: '100px' } }" :wrapper-col="{ span: 24 }">
                <#list tableClass.allFields as field>
                <#if field.fieldName != "id">
                <a-form-item name="${field.fieldName}" label="名" :rules="[{ required: true, message: '请输入名' }]">
                    <a-input v-model:value="formState.formData.${field.fieldName}" :maxlength="50" placeholder="请输入名" />
                </a-form-item>
                </#if>
                </#list>
            </a-form>
        </a-modal>
    </page-container>
</template>

<style lang="less" scoped>

</style>
